<template>
  <el-form
    ref="loginForm"
    :rules="loginRules"
    :model="loginForm"
    class="login-form"
    status-icon
    label-width="0">
    <el-form-item prop="loginname">
      <el-input
        v-model="loginForm.loginname"
        size="small"
        auto-complete="off"
        placeholder="请输入登录名">
        <i
          slot="prefix"
          class="icon-yonghu"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="newpassword1">
      <el-input
        :type="passwordType"
        v-model="loginForm.newpassword1"
        size="small"
        auto-complete="off"
        placeholder="新密码">
        <i
          slot="suffix"
          class="el-icon-view el-input__icon"
          @click="showPassword"/>
        <i slot="prefix" class="iconfont icon-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="newpassword2">
      <el-input
        :type="passwordType1"
        v-model="loginForm.newpassword2"
        size="small"
        auto-complete="off"
        placeholder="确认密码">
        <i
          slot="suffix"
          class="el-icon-view el-input__icon"
          @click="showPassword1"/>
        <i slot="prefix" class="iconfont icon-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="checkCode">
      <el-input
        v-model="loginForm.checkCode"
        size="small"
        auto-complete="off"
        placeholder="请输入验证码">
        <i
          slot="prefix"
          class="icon-yanzhengma"
          style="margin-top:6px;"/>
        <template slot="append">
          <span
            :class="[{display:msgKey}]"
            class="msg-text"
            @click="handleSend">{{ msgText }}</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        size="small"
        type="primary"
        class="login-submit"
        @click.native.prevent="handleLogin">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  const MSGINIT = '发送验证码',
    MSGSCUCCESS = '${time}秒后重发',
    MSGTIME = 60
  import { mapGetters } from 'vuex'
  import request from '@/router/axios'
  import { getStore, setStore } from '@/util/store'
  import {encryption} from '@/util/util'
  import {forgetpwd} from '@/api/admin/user'
  export default {
    name: 'Codelogin',
    props: {
      active:{},
      activeName: {}
    },
    data() {
      const validatePwd = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入确认密码'))
        } else if(!this.loginForm.newpassword1){
          callback(new Error('请输入新密码'))
        } else if (value != this.loginForm.newpassword1) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }
      const validateCode = (rule, value, callback) => {
        if (value.length != 4) {
          callback(new Error('请输入4位数的验证码'))
        } else {
          callback()
        }
      }
      return {
        msgText: MSGINIT,
        msgTime: MSGTIME,
        msgKey: false,
        loginForm: {
          loginname: '',
          newpassword1: '',
          newpassword2: '',
          checkCode: ''
        },
        passwordType: 'password',
        passwordType1: 'password',
        loginRules: {
          loginname: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
          ],
          newpassword1: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
          ],
          newpassword2: [{ required: true, trigger: 'blur', validator: validatePwd }],
          checkCode: [{ required: true, trigger: 'blur', validator: validateCode }]
        }
      }
    },
    created() { },
    mounted() { },
    computed: {
      ...mapGetters(['tagWel'])
    },
    methods: {
      handleSend() {
        if (this.msgKey) return
        if(!this.loginForm.loginname){
          this.$message.error("请输入登录名")
          return
        }

        request({
          url: '/admin/emailCode/' + this.loginForm.loginname + '/' + getStore({ name: 'tenantId' }),
          method: 'get'
        }).then(response => {
          if (response.data.data) {
            this.$message.success('验证码发送成功')
            this.msgText = MSGSCUCCESS.replace('${time}', this.msgTime)
            this.msgKey = true
            const time = setInterval(() => {
              this.msgTime--
              this.msgText = MSGSCUCCESS.replace('${time}', this.msgTime)
              if (this.msgTime === 0) {
                this.msgTime = MSGTIME
                this.msgText = MSGINIT
                this.msgKey = false
                clearInterval(time)
              }
            }, 1000)
          } else {
            this.$message.error(response.data.msg)

          }
        })

      },
      showPassword() {
        this.passwordType == ''
          ? (this.passwordType = 'password')
          : (this.passwordType = '')
      },
      showPassword1() {
        this.passwordType1 == ''
          ? (this.passwordType1 = 'password')
          : (this.passwordType1 = '')
      },
      handleLogin() {
        if (!this.active){
          this.$message.error('请选择租户')
          return false
        }
        this.$refs.loginForm.validate(valid => {
          if (!valid) {
            return false
          }
          const user = encryption({
            data: this.loginForm,
            key: 'scaxscaxscaxscax',
            param: ['newpassword1', 'newpassword2']
          })
          user.tenantId = getStore({ name: 'tenantId' })
          forgetpwd(user).then(response => {
            this.$notify.success('修改成功')
            this.$emit('update:activeName', 'user')
          })
        })
      }
    }
  }
</script>

<style>
</style>
